<script setup lang="ts">
import type { SongInfo } from '@/types/Playing'
import PlayItem from '@/views/Music/components/PlayItem.vue'
import PlayProgress from '@/views/Music/components/PlayProgress.vue'
const emit = defineEmits([
  'onDrag',
  'onLike',
  'onRecommend',
  'onShare',
  'onRecommend',
  'onShare',
  'onDislike',
  'onSongMore'
])
defineProps<{
  songInfo: SongInfo
}>()

const onDrag = (progress:number)=>{
  emit('onDrag',progress)
}
const onLike = ()=>{
  emit('onLike')
}
const onRecommend = ()=>{
  emit('onRecommend')
}
const onShare = ()=>{
  emit('onShare')
}
const onDislike = ()=>{
  emit('onDislike')
}
const onSongMore = ()=>{
  emit('onSongMore')
}
</script>

<template>
  <div style="width:100%; height:90vh;padding-top:10vh;">
    <div class="image" :style="{ backgroundImage: `url(${songInfo.cover})` }">

    </div>

    <div class="lyric">
      {{ songInfo.lyric }}
    </div>

    <div class="name">
      <span class="song-name">{{ songInfo.name }}</span>
      <span class="vip">VIP</span>
    </div>

    <div class="author">
      <span class="author-name">{{ songInfo.pop }}</span>
      <span class="author-follow">关注</span>
    </div>

    <div class="items">
      <div class="left">
        <PlayItem @on-like="onLike" :song-info="songInfo" :icon="songInfo.likeIcon" style="margin-left: 4vw; width: 18vw; "/>
        <PlayItem @on-recommend="onRecommend" :song-info="songInfo" :icon="songInfo.comIcon" style="margin-left: 4vw; width: 18vw;" />
        <PlayItem @on-share="onShare" :song-info="songInfo" :icon="songInfo.shareIcon" style="margin-left: 4vw; width: 18vw;" />
      </div>
      <div class="right">
        <span class="iconfont icon-buxihuan unlike" @click="onDislike"></span>
        <span class="iconfont icon-gengduo song-more" @click="onSongMore"></span>
      </div>
    </div>

   <PlayProgress :song-info="songInfo" @on-drag="onDrag"/>

  </div>
</template>

<style lang="scss" scoped>
.image {
  margin: 5vw auto 0 5vw;
  background-color: transparent;
  width: 92vw;
  height: 92vw;
  border-radius: 3vw;
  //background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd');
  background-size: cover;
}

.lyric {
  margin-top: 8vw;
  margin-left: 4vw;
  color: #fff;
  font-size: 4vw;
}

.name {
  margin-top: 8vw;
  margin-left: 4vw;
}

.song-name {
  font-size: 5vw;
  color: #fff;
  line-height: 5vw;
}

.vip {
  margin-left: 2vw;
  font-size: 4vw;
  color: #fff;
  background-color: #666;
  line-height: 5vw;
  padding: 0.5vw 2vw;
  border-radius: 10%;
}

.author {
  margin-top: 3vw;
  margin-left: 4vw;
}

.author-name {
  color: #fff;
  font-size: 4vw;
  line-height: 4vw;
}

.author-follow {
  margin-left: 2vw;
  font-size: 3vw;
  color: #fff;
  background-color: #666;
  line-height: 4vw;
  padding: 0.5vw 2vw;
  border-radius: 1.5vw;
}

.items {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  margin-top: 8vw;
}

.right {
  margin-right: 4vw;
  width: 16vw;
  display: flex;
  justify-content: space-between;
}

.left {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.unlike {
  display: inline-block;
  font-size: 10vw;
  width: 10vw;
  line-height: 10vw;
  color: #fff;
}

.song-more {
  display: inline-block;
  font-size: 10vw;
  width: 2vw;
  line-height: 10vw;
  color: #fff;
  margin-right: 10vw;
  background-color: transparent;
}


</style>